<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="java.util.*"%>
<%@ page import="com.google.gson.*"%>
<%@ page import="com.reserv.vo.*"%>
<%@ page import="com.reserv.util.TimestampUtil"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<fmt:requestEncoding value="utf-8" />
<div class="col-xs-12" id="view">
	<div>
		<ol class="breadcrumb">
			<li><a href="/Reservation/main/index.res">홈</a></li>
			<c:if test="${ service.type eq 'gym' }">
				<li><a href="/Reservation/reserv/list.res?type=gym">체육시설</a></li>
			</c:if>
			<c:if test="${ service.type eq 'pub' }">
				<li><a href="/Reservation/reserv/list.res?type=pub">시설대관</a></li>
			</c:if>
			<li class="active">시설정보</li>
		</ol>
	</div>
	<div class="row" id="viewHeader">
		<div class="col-xs-8">
			<div class="page-header">
				<h3>
					${ service.title }
					<c:if test="${ service.stat eq 0 }">
						<span class="label label-primary">접수중</span>
					</c:if>
					<c:if test="${ service.stat eq 1 }">
						<span class="label label-danger">접수마감</span>
					</c:if>
					<c:if test="${ service.stat eq 2 }">
						<span class="label label-warning">점검중</span>
					</c:if>
				</h3>
			</div>
			<div class="row">
				<div class="col-xs-5" id="viewImgDiv">
					<div class="thumbnail">
						<img src="../img/fImg/${ facility.img }.jpg"
							alt="${ facility.name }">
						<button type="button" id="imgPopupBtn" class="btn btn-success"
							data-toggle="modal" data-target="#pop">이미지 크게보기</button>
						<p>회원평점 (${ commentLen })명 참여</p>
						<div id="imgStar">
							<c:if test="${ avgGrade eq 1 }">
								<div class="star star1"></div>
							</c:if>
							<c:if test="${ avgGrade eq 2 }">
								<div class="star star2"></div>
							</c:if>
							<c:if test="${ avgGrade eq 3 }">
								<div class="star star3"></div>
							</c:if>
							<c:if test="${ avgGrade eq 4 }">
								<div class="star star4"></div>
							</c:if>
							<c:if test="${ avgGrade eq 5 }">
								<div class="star star5"></div>
							</c:if>
						</div>
					</div>
				</div>
				<div class="col-xs-7">
					<table>
						<tr>
							<th><label>이용기간</label></th>
							<td><p>${ tsu.dropSec(service.rsDate) } ~ ${ tsu.dropSec(service.reDate) }</p></td>
						</tr>
						<tr>
							<th><label>장소</label></th>
							<td><p>${ facility.addr }</p></td>
						</tr>
						<tr>
							<th><label>이용료</label></th>
							<td><p>${ service.fee > 0 ? '유료' : '무료' }</p></td>
						</tr>
						<tr>
							<th><label>접수기간</label></th>
							<td><p>${ tsu.dropSec(service.rtsDate) } ~ ${ tsu.dropSec(service.rteDate) }</p></td>
						</tr>
						<tr>
							<th><label>취소기간</label></th>
							<td><p>이용일로부터 ${ service.rcDate }일 전까지</p></td>
						</tr>
						<tr>
							<th><label>문의전화</label></th>
							<td><p>${ service.phone }</p></td>
						</tr>
					</table>
				</div>
			</div>
		</div>
		<div id="calpanel" class="col-xs-4">
			<div class="alert alert-info">예약현황</div>
			<div class="calwrap">
				<div id="viewCal"></div>
				<div>
					<span>-예약가능</span><span>-예약마감</span>
				</div>
				<div>
					<p>※ 위 예약현황은 수시로 변경 될 수 있어 예약 신청시 예약현황과 다를 수 있습니다</p>
				</div>
			</div>
			<button type="button" class="btn btn-primary" id="reserv">예약하기</button>
		</div>
	</div>
	<div class="col-xs-12" id="tabDiv">
		<!-- tab -->
		<ul class="nav nav-tabs" id="subTab">
			<li class="active"><a href="#tabDetail">상세정보</a></li>
			<li><a href="#tabComment">이용후기/평점</a></li>
		</ul>
		<!-- 상세정보 -->
		<div class="tab-content">
			<div class="tab-pane active" id="tabDetail">
				<h4>1.공공시설 예약서비스 이용시 필수 준수사항</h4>
				<p>
					모든 서비스의 이용은 담당 기관의 규정에 따릅니다. 각 시설의 규정 및 허가조건을 반드시 준수하여야 합니다.<br />
					각 관리기관의 시설물과 부대시설을 이용함에 있어 담당자들과 협의 후 사용합니다.<br /> 각 관리기관의 사고 발생시
					서울시청에서는 어떠한 책임도 지지않습니다.<br /> 시설이용료 납부는 각 관리기관에서 규정에 준 합니다.<br />
					본 사이트와 각 관리기관의 규정을 위반할시에는 시설이용 취소 및 시설이용 불허의 조치를 취할 수 있습니다.
				</p>
				<h4>2. 시설예약</h4>
				<p>회원에 가입 하시게 되면 서울시 공공예약 서비스에서 제공하는 다양하고 많은 혜택을 받으실 수 있습니다.</p>
				<h4>3. 상세내용</h4>
				<p>${ service.detail }</p>
				<h4>4. 주의사항</h4>
				<p>
					<strong>사용승인의 제한</strong><br /> 1. 특정 종교 활동 관련 행사<br /> 2. 정치단체의
					집회 및 정치단체와 관련된 집회 또는 행사<br /> 3. 영리행위를 목적으로 시설사용 신청을 한 때<br /> 4.
					자치회관의 시설 또는 설비를 훼손할 우려가 있어 관리상 사용이 부적절 한 때 <br />
				</p>
				<h4>5. 찾아오시는 길</h4>
				<p>${ facility.direct }</p>
			</div>

			<!-- 이용후기/평점 -->
			<div class="tab-pane" id="tabComment">
				<form class="form-inline" id="commentForm">
					<div>
						<span id="txtaLength">[0/500 자]</span>
						<ul class="list-inline">
							<li><input type="radio" name="grade" value="1"
								checked="checked">
								<div class="star star1"></div></li>
							<li><input type="radio" name="grade" value="2">
								<div class="star star2"></div></li>
							<li><input type="radio" name="grade" value="3">
								<div class="star star3"></div></li>
							<li><input type="radio" name="grade" value="4">
								<div class="star star4"></div></li>
							<li><input type="radio" name="grade" value="5">
								<div class="star star5"></div></li>
						</ul>
					</div>
					<textarea class="form-control" id="comment"></textarea>
					<button type="button" class="btn btn-primary" id="commentBtn">이용후기작성</button>
				</form>
				<div id="commentList">
					<table class="table table-striped table-bordered"
						id="commentTable">
						<c:forEach var="comment" items="${ comments }">
							<tr>
								<td>${ comment.uid }</td>
								<td>
									<div id="imgStar">
										<c:if test="${ comment.grade eq 1 }">
											<div class="star star1"></div>
										</c:if>
										<c:if test="${ comment.grade eq 2 }">
											<div class="star star2"></div>
										</c:if>
										<c:if test="${ comment.grade eq 3 }">
											<div class="star star3"></div>
										</c:if>
										<c:if test="${ comment.grade eq 4 }">
											<div class="star star4"></div>
										</c:if>
										<c:if test="${ comment.grade eq 5 }">
											<div class="star star5"></div>
										</c:if>
									</div>
								</td>
								<td>${ comment.comment }</td>
								<td>${ tsu.dropSec(comment.regDate) }</td>
							</tr>
						</c:forEach>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- img modal -->
<div class="modal fade" id="pop" tabindex="-1" role="dialog">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">×</button>
				<h4 class="modal-title">${ service.title }</h4>
			</div>
			<div class="modal-body">
				<div>
					<img id="popImg" src="../img/fImg/${ facility.img }.jpg"
						alt="${ facility.name }">
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" data-dismiss="modal">닫기</button>
			</div>
		</div>
	</div>
</div>
<script>
	setProperty("${ service.sno }", "viewCal");
	process();
	
	$("#subTab a").click(function(e) {
		e.preventDefault();
		$(this).tab("show");
	});
	$("#comment").on("keyup", function() {
		console.log("comment keyup");
		var comment = $(this).val();
		var currLength = comment.length;
		if (currLength > 500) {
			$(this).val(comment.substr(comment, 500));
			currlength = $(this).val().length;
		}
		$("#txtaLength").html("[" + currLength + "/500 자]");
	});
	$("#commentBtn").click(function() {
		var isLogin = "${ isLogin }";
		var comment = $("#comment").val();
		var grade = $("input[type='radio'][name='grade']:checked").val();
		var fno = "${ facility.fno }";
		var uid = "${ member.uid }";

		if (!(isLogin.length > 0)) {
			alert("회원 로그인이 필요한 서비스입니다.");
			return;
		}
		if (comment.length <= 0) {
			alert("이용후기가 입력되지않았습니다.");
			return;
		}
		$.ajax({
			url : "/Reservation/view/regComment.res",
			type : "post",
			data : {
				fno : fno,
				uid : uid,
				comment : comment,
				grade : grade
			},
			success : function() {
				var table = "<tr>";
				table += "<td>" + uid + "</td>";
				switch (parseInt(grade)) {
				case 1:
					table += "<td><div class='star star1'></div></td>";
					break;
				case 2:
					table += "<td><div class='star star2'></div></td>";
					break;
				case 3:
					table += "<td><div class='star star3'></div></td>";
					break;
				case 4:
					table += "<td><div class='star star4'></div></td>";
					break;
				case 5:
					table += "<td><div class='star star5'></div></td>";
					break;
				}
				table += "<td>" + comment + "</td>";
				
				var date = new Date();
				var today = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
				table += "<td>" + today + "</td>";
				table += "</tr>";
				$("#commentTable").prepend(table);
			},
			error : function() {
				alert("에러");
			}
		});
	});
	$("#reserv").click(function() {
		var isLogin = "${ isLogin }";
		
		var sno = "${ service.sno }";
		var step = 4;
		
		if (isLogin.length > 0) {
			$("#sno").val(sno);
			$("#step").val(4);
			
			$("#qReserv2").modal({
				show : true,
				keyboard : false
			});
		} else {
			alert("회원 로그인이 필요한 서비스입니다.");
		}
	});
</script>